<template>
  <div class="search_t">
    <div class="input_t">
      <el-input v-model="classname" placeholder="请输入班级名称" style="width: 200px;margin-right: 10px" clearable></el-input>
      <el-input v-model="materialname" placeholder="请输入资料名称" style="width: 200px;margin-right: 10px" clearable></el-input>
    </div>
    <div class="button_t">
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>
  </div>
  <div style="display: flex;justify-content: center">
    <el-table
        :data="materialData"
        border
        style="width: 48.88%">
      <el-table-column label="序号" width="80" align="center">
        <template #default="scope">
          {{ (currentPage - 1) * pagesize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
          label="班级"
          prop="name"
          width="180"
          align="center"
          header-align="center"
      ></el-table-column>
      <el-table-column
          label="老师"
          prop="teacherName"
          width="180"
          align="center"
          header-align="center"
      ></el-table-column>
      <el-table-column
          label="资料数量"
          prop="materialNum"
          width="180"
          align="center"
          header-align="center"
      ></el-table-column>
      <el-table-column
          type="expand"
          label="资料"
          width="180"
          align="center"
          header-align="center"
      >
        <template #default="props">
          <el-table :data="props.row.materials" border style="width: 100%" @sort-change="handleSortChange">
            <el-table-column label="序号" width="80" align="center">
              <template #default="scope">
                {{ (currentPage - 1) * pagesize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
                label="标题"
                prop="title"
                align="center"
                width="180"
                header-align="center"
            ></el-table-column>
            <el-table-column
                label="视频"
                prop="videoPath"
                width="180"
                align="center"
                header-align="center"
            >
              <template #default="props">
                <div style="width: 180px; height: 95px; overflow: hidden;">
                  <img
                      :src="props.row.videoPng"
                      style="width: 100%; height: auto;"
                      @click="openVideoDialog(props.row)"
                  />
                </div>
                <!-- 图标 -->
                <div
                    style="
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      font-size: 24px;
                      color: white;
                      background-color: rgba(0, 0, 0, 0.5);
                      border-radius: 50%;
                      padding: 8px;
        "
                >
                  <!-- 使用 Font Awesome 或其他图标库的图标 -->
                  <el-icon @click="openVideoDialog(props.row)"><VideoPlay /></el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                label="上传时间"
                prop="createdAt"
                width="180"
                align="center"
                header-align="center"
                :formatter="formatDate"
                sortable
            ></el-table-column>
          </el-table>
        </template>

      </el-table-column>
    </el-table>
  </div>
  <div class="flex-box">
    <el-pagination
        v-model:current-page="pageno"
        v-model:page-size="pagesize"
        :page-sizes="[10, 20, 40, 50]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="videoDialogVisible" title="视频预览" width="80%" destroy-on-close>
    <video controls width="100%" :src="videoUrl" />
  </el-dialog>
</template>
<script setup>
import { ref, reactive ,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import {Search} from '../../../api/material.js'
import dayjs from "dayjs";

const currentPage=ref(1)
const classname = ref('')
const materialname = ref('')
const materialData = ref([
  {
    classId: '',
    name: "",
    teacherId: '',
    teacherName: "",
    materialNum: '',
    materials: [
      {
        materialId: '',
        classId: '',
        title: "",
        videoPath: "",
        videoPng: "",
        isDeleted: '',
        createdAt: ""
      }
    ]
  }
])
const pageno = ref(1)
const pagesize = ref(10)
const total = ref(0)
const size = ref(false)
const disabled = ref(false)
const background = ref(false)

const handleSizeChange = (val) => {
  pagesize.value = val
  search()
}
const handleCurrentChange = (val) => {
  pageno.value = val
  search()
}
const videoDialogVisible = ref(false);
const videoUrl = ref('');

// 打开视频弹窗
const openVideoDialog = (row) => {
  // 构造视频的完整 URL
  const fileName = row.videoPath;
  videoUrl.value = `http://localhost:8080/api/material/video/${encodeURIComponent(fileName)}`;
  videoDialogVisible.value = true;
};
const search = () => {
  Search({
    classname:classname.value,
    materialname:materialname.value,
    studentId:JSON.parse(localStorage.getItem('userInfo')).userId,
    pageno:pageno.value,
    pagesize:pagesize.value
  }).then(res=>{
    materialData.value = res.data.data.records
    total.value = res.data.data.total
  })
}
const formatDate=(row, column, cellValue)=> {
  // 使用 dayjs 格式化日期
  return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
}
//排序函数实现
const handleSortChange=({ column, prop, order })=> {
  if (prop === 'createdAt') {
    // 判断排序是否为升序，如果是ascending，则进行升序排列
    if (order === 'ascending') {
      materialData.value.sort((a, b) => {
        return new Date(a[prop]) - new Date(b[prop]);
      });
    } else if (order === 'descending') { // 如果是降序，也可以添加相应的处理
      materialData.value.sort((a, b) => {
        return new Date(b[prop]) - new Date(a[prop]);
      });
    }
  }
}
onMounted(() => {
  search()
})
</script>
<style lang="less" scoped>
.search_t{
  display: flex;
  padding-left: 25.5%;
}
.flex-box{
  display: flex;
  justify-content: center;
}
</style>
